<template>
	<view class="pageItem">
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-gengduo-copy" @tap="backPage"></view>
			<view class="text">添加地址</view>
		</view>
		<view class="clear_box"></view>
		<view class="card">
			<view class="c_row">
				<view class="c_r_tit">收货人</view>
				<input class="c_r_val" type="text" placeholder="请填写姓名" placeholder-class="no_txt"/>
			</view>
			<view class="c_row">
				<view class="c_r_tit">联系电话</view>
				<input class="c_r_val" type="number" placeholder="请填写联系人电话" placeholder-class="no_txt"/>
			</view>
			<view class="c_row">
				<view class="c_r_tit">收货地址</view>
				<!-- #ifdef MP-WEIXIN -->
				<picker class="picker_box" mode="region" @change="addressChange">
					<input class="picker_val" type="text" v-model="address" disabled placeholder="请选择收货地址" placeholder-class="no_txt"/>
				</picker>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<picker class="picker_box" @change="addressChange">
					<input class="picker_val" type="text" v-model="address" disabled placeholder="请选择收货地址" placeholder-class="no_txt"/>
				</picker>
				<!-- #endif -->
				<view class="iconfont icon">&#xe62d;</view>
			</view>
			<view class="c_row">
				<view class="c_r_tit">门牌号</view>
				<input class="c_r_val" type="text" placeholder="详细地址 例：6栋三单元301" placeholder-class="no_txt"/>
			</view>
			<view class="c_row">
				<view class="c_r_tit2">设为默认地址</view>
				<view class="c_r_icon">
					<view class="iconfont icon2" v-if="default_swiper" @click="swiperChange">&#xe604;</view>
					<view class="iconfont icon" v-else  @click="swiperChange">&#xe605;</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" data-url="/pages/address/addressEdit?type=add">{{type == 'add' ? '添加地址':'保存'}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'add',
				default_swiper: false,
				address:''
			};
		},
		onLoad(e) {
			if(e.type){
				this.type = e.type;
			}
		},
		methods:{
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			addressChange(e){
				// #ifdef MP-WEIXIN
					this.address = e.detail.value[0]+','+e.detail.value[1]+','+e.detail.value[2];
				// #endif
			},
			swiperChange(){
				this.default_swiper = !this.default_swiper;
			}
		}
	}
</script>
<style>
page{
	background: #F6F8FA;
	padding-bottom: 21vw !important;
}
.pageItem{
	width: 100%;
	box-sizing: border-box;
}
.pageItem *{
	box-sizing: border-box;
}
</style>
<style lang="scss">
.card{
	width: 92%;
	display: inline-block;
	margin-top: 4vw;
	margin-left: 4%;
	border-radius: 20rpx;
	background: #ffffff;
	padding: 30rpx;
	.c_row:not(:first-of-type){
		margin-top: 30rpx;
	}
	.c_row{
		width: 100%;
		display: flex;
		align-items: center;
		.c_r_tit{
			width: 180rpx;
			font-size: 4vw;
			font-weight: bold;
			color: #333333;
		}
		.c_r_val{
			flex: 1;
			height: 8vw;
			line-height: 8vw;
			font-size: 4vw;
			color: #484848;
		}
		.icon{
			font-size: 3vw;
			color: #999999;
			padding-left: 15rpx;
		}
		.no_txt{
			font-size: 3.5vw;
			color: #999999;
		}
		.c_r_tit2{
			@extend .c_r_tit;
			width: 240rpx;
		}
		.picker_box{
			@extend .c_r_val;
			.picker_val{
				width: 100%;
				height: 8vw;
			}
		}
		.c_r_icon{
			flex: 1;
			text-align: right;
			background: #ffffff;
			.icon{
				font-size: 5.5vw;
				color: #999999;
			}
			.icon2{
				@extend .icon;
				color: #0DA4AD !important;
			}
		}
	}
}
.footer{
	position: fixed;
	z-index: 98;
	width: 100%;
	height: 19vw;
	padding: 2vw 4% 5vw;
	bottom: 0;
	left: 0;
	background: #F6F8FA;
	.btn{
		height: 12vw;
		line-height: 12vw;
		border-radius: 7vw;
		text-align: center;
		width: 100%;
		background: #0DA4AD;
		font-size: 5vw;
		color: #ffffff;
		letter-spacing: 3rpx;
	}
}
</style>

